<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>{{num}}</p>
    <button @click='num++'>加加</button>
    <ul>
      <li v-for="(item,index) in list" :key="index">
        <img :src="item.img" alt="">
        <h2>{{item.name}}</h2>
        <p>{{item.num}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data(){
    return{
      num:0,
      list:[]
    }
  },
  beforeCreate(){
    console.log('开始创建');
  },
  created(){
    console.log('实例创建完成后');
  },
  beforeMount(){
      console.log('开始渲染');
  },
  mounted(){
    console.log('渲染完成');
    axios.get('/list').then(res=>{
         this.list=res.data
    })
  },
  beforeUpdate(){
    console.log('数据发生改变前');
  },
  updated(){
    console.log('数据更新之后');
  },
  activated(){
    console.log('被 keep-alive 缓存的组件激活');
  },
  deactivated(){
    console.log('被 keep-alive 缓存的组件失活');
  },
  beforeDestroy(){
    console.log('实例销毁之前');
  },
  destroyed(){
    console.log('实例销毁后');
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
